@import '../../styles/index';
@tree-select-prefix-cls: ~"@{ane-prefix}-tree-select";

.item-selected() {
    background-color: #eee;
    font-weight: 700;
    color: rgba(0,0,0,.65);
}

.@{tree-select-prefix-cls} {
    position: relative;
    cursor: pointer;

    &.@{tree-select-prefix-cls}-multiple {
        cursor: text;
        height: initial;
        padding: 0 0 0 12px;
        min-height: 34px;

        &:before {
            content: " ";
            display: table;
        }

        &:after {
            content: " ";
            display: table;
            clear: both;
            visibility: hidden;
            font-size: 0;
            height: 0;
        }

        .@{tree-select-prefix-cls}-selection {
            .@{tree-select-prefix-cls}-search {
                height: 25px;
                line-height: 25px;
                margin-top: 4px;
            }
        }
    }

    &-selection {
        list-style: none;
        padding: 0;

        &.@{tree-select-prefix-cls}-tags li.@{tree-select-prefix-cls}-choice {
            position: relative;
            display: block;
            float: left;
            margin: 4px 4px 0 0;
            background-color: #d0d0d0;
            height: 25px;
            max-width: 99%;
            line-height: 25px;
            padding: 0 8px;
            user-select: none;

            span {
                padding-right: 16px;
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            i {
                display: inline;
                cursor: pointer;
                position: absolute;
                right: 4px;
                line-height: inherit;
                padding-left: 8px;
                padding-right: 4px;

                &:hover {
                    color: #404040;
                }
            }
        }

        .@{tree-select-prefix-cls}-selected {
            position: absolute;
            left: 12px;
            padding: 1px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
            padding-right: 14px;
        }

        .@{tree-select-prefix-cls}-search {
            display: block;
            float: left;
        }

        input.@{tree-select-prefix-cls}-search-field {
            height: 100%;
            border-width: 0;
            box-shadow: none;
            background: transparent url('') repeat scroll 0 0;
            outline: none;
            line-height: inherit;
        }

        li.@{tree-select-prefix-cls}-choice {
            display: none;
        }
    }

    .@{tree-select-prefix-cls}-arrow {
        position: absolute;
        top: 7px;
        right: 8px;
        line-height: 20px;
    }
}

.@{tree-select-prefix-cls}-dropdown {
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    box-sizing: border-box;

    &-menu {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        max-height: 250px;

        &-item {
            position: relative;
            display: block;
            padding: 7px 13px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            user-select: none;

            &:focus,
            &:hover {
                background: @item-hover-bg;

                i {
                    color: #dddddd;
                    display: inline-block;
                }
            }

            i {
                display: none;
                position: absolute;
                right: 13px;
                line-height: inherit;
            }
        }

        &-item-selected {
            .item-selected;

            &:hover {
                .item-selected;
            }

            i {
                color: @brand-primary;
                display: inline-block;
            }
        }

        &-item-disabled,
        &-item-disabled:hover {
            background-color: inherit;
            color: @disabled-color;
            cursor: not-allowed;
        }
    }
}